<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial 1 - Getting started</title>

<script type="text/javascript" src="sh/shCore.js"></script>
<script type="text/javascript" src="sh/shBrushJScript.js"></script>
<link href="sh/shCore.css" rel="stylesheet" type="text/css" />
<link href="sh/shThemeDefault.css" rel="stylesheet" type="text/css" />    

<script type="text/javascript" src="../../build/caat.js"></script>

<script type="text/javascript">
     SyntaxHighlighter.all()
</script>
    
<style>
    div.code {
       font-size: .7em;
    }
</style>

</head>


<body style="color:black; background:#ffffff;">

<div class="section">
    <h1>Before you start</h1>
    <p>There's only one requisite beforing using CAAT and is that of referencing the library.</p>
    <p>In the library bundle under the folder <strong>build</strong> there's a file called <strong>caat.js</strong> which
    contains the whole library compiled into a single file. We must include the scripts contained into that file
    in the header section of your html file with:</p>
    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
            <script type="text/javascript" src="../../build/caat.js"></script>
        </pre>
    </div>

    <p>All the examples in this series tutorial and demos include this line at the top of the main file.</p>
    <p>Make sure to change the path '../../build/' to your needs.</p>

</div>

<div class="section">
<h1>Getting started</h1>
<p>One of the minimum CAAT library setup programs could be this one:


    <div class="code">
    <pre class="brush: js; auto-links: false; toolbar: false;">
    <script>
        var director = new CAAT.Director().initialize(
                100,    // 100 pixels wide
                100,    // 100 pixels across
                document.getElementById('_c1'));

        var scene=     new CAAT.Scene().create();

        var circle=    new CAAT.ShapeActor().
                create().
                setLocation(20,20).
                setSize(60,60).
                setFillStyle('#ff0000').
                setStrokeStyle('#000000');

        scene.addChild(circle);
        director.addScene(scene);

        director.loop(1);
    </script>
    </pre>
    </div>

    <p>By executing it, we'll get a black-outlined red circle at position 20,20 and of radius 30.
    <p>Despite its simplicity, some facts must be taken into account:
    <ol>
    <li>When using CAAT, it's mandatory to create a CAAT.Director instance. The Director is the entry point to CAAT.
    <li>You must explictly supply a canvas size in pixels. In this example 100 by 100 pixels.</li>
    <li>The director will perform animations in a HTML document canvas element. We can supply a reference to a canvas,
    or simple issue a <strong>new CAAT.Director().initialize(100,100)</strong> command and let the director create a canvas for us.</li>
    <li>The Director instance is fed with scenes. CAAT.Scene instances are advanced actor containers. We'll see how the Director manages Scenes, and how to elegantly switch from one to the other.
    <li>Scenes are fed with CAAT.Actor instances. Indeed, as much as needed.
    <li>CAAT.Actor instances and its subinstances (ShapeActor, SpriteActor, etc.) have a lifecycle, so it must be explicitly stated the call to create method.
    <li>We must call director.loop to signal CAAT to start delivering content to the canvas.
    </ol>

    <p>And that's it, our red circle:


<div class="sample"><canvas id="_c1"></canvas></div> 
<script>
    // We assume that there's a element called _c1 in the dom.
    // This element must be a Canvas element.
    var director = new CAAT.Director().initialize(
            100,100,
            document.getElementById('_c1'));

    var scene=     new CAAT.Scene().create();
    var circle=    new CAAT.ShapeActor().
            create().
            setLocation(20,20).
            setSize(60,60).
            setFillStyle('#ff0000').
            setStrokeStyle('#000000');

    scene.addChild(circle);
    director.addScene(scene);

    director.loop(1);
</script>

<div class="section">
    <p>In this other example, we're not specifying a DOM canvas element to the Director instantiation. The director itself will create one for us
    and we'll be responsible for adding the element to the desired position in the DOM.</p>

    <div class="code">
        <pre class="brush: js; auto-links: false; toolbar: false;">
<script>
    // We are not pointing any canvas in the director creation statement,
    // so the director will create a Canvas for us.
    var director2 = new CAAT.Director().initialize(100,100);

    // add the canvas to the document:
    document.getElementById('div_canvas2').appendChild( director2.canvas );

    var scene2=     new CAAT.Scene().create();
    var circle2=    new CAAT.ShapeActor().
            create().
            setLocation(20,20).
            setSize(60,60).
            setFillStyle('#ff00ff').
            setStrokeStyle('#00ff00');

    scene2.addChild(circle2);
    director2.addScene(scene2);

    director2.loop(1);
</script>            
        </pre>
    </div>

</div>

<div class="sample" id="div_canvas2"></div>
<script>
    // We are not pointing any canvas in the director creation statement,
    // so the director will create a Canvas for us.
    var director2 = new CAAT.Director().initialize(100,100);

    // add the canvas to the document:
    document.getElementById('div_canvas2').appendChild( director2.canvas );

    var scene2=     new CAAT.Scene().create();
    var circle2=    new CAAT.ShapeActor().
            create().
            setLocation(20,20).
            setSize(60,60).
            setFillStyle('#ff00ff').
            setStrokeStyle('#00ff00');

    scene2.addChild(circle2);
    director2.addScene(scene2);

    director2.loop(1);
</script>

</body>
</html>